
<template>
  <div>
     <el-button
            size="mini"
            type="primary"
            @click="onSee()">查看</el-button>
    <!-- <el-table :data="tableData"
              class="table-default">
      <el-table-column
        prop="id"
        label="操作"
        align="center"
        width="300"
        >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="onSee(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <el-dialog
      title="预览"
      :visible.sync="seeVisible"
      width="800px"
      fullscreen
      center>
      <div style="padding: 10px; overflow: auto;" v-loading="excelLoading">
        <excelPreview :datas="excelData"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="seeVisible = false">关  闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import excelPreview from '@/page/helpDoc/excelPreview'
export default {
  name: 'query',
  components: {
    excelPreview
  },
  data () {
    return {
      seeVisible: false,
      excelData: null,
      excelLoading: false,
      downloadDisabled: false
    }
  },
  created () {
    this.getTable()
  },
  mounted () {
  },
  methods: {
    getTable () {
      this.tableData = []
      this.$axios.get('', { params: {
      } })
        .then((res) => {
        })
    },
    onSee (obj) {
      // if (obj.suffix === '.pdf') {
      //   window.open(obj.url)
      // } else {
        this.excelLoading = true
        this.seeVisible = true
        this.$axios.get("/static/aaaaa.pdf", {
          responseType: 'arraybuffer'
        })
          .then((res) => {
            console.log("res.data",res.data)
            this.excelData = res.data
            this.excelLoading = false
          })
      // }
    }
  }
}
</script>

<!--
<template>
  <div id="table">

    <div class="tab">
      <el-radio-group v-model="cardActive">
        <el-radio-button v-for="(item,index) in card" :label="item" :key="index" @click="chooseTable(item)"></el-radio-button>
      </el-radio-group>
    </div>

     <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        v-for="(value,key,index) in tableData[2]"
        :key="index"
        :prop="key"
        :label="key">
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  data () {
    return {
      tableData: [],
      card: [],
      cardActive: '',
      workbook: {}

    }
  },
  watch: {
    cardActive (ov, nv) {
      this.getTable(ov)
    }
  },
  mounted () {
    this.readWorkbookFromRemoteFile('../assets/aaa.xlsx')
  },
  methods: {
    readWorkbookFromRemoteFile: function (url) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      let _this = this
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          var data = new Uint8Array(xhr.response)
          console.log("data=====",data)
          var workbook = XLSX.read(data, {type: 'array'})
          console.log(workbook)

          var sheetNames = workbook.SheetNames // 工作表名称集合
          _this.workbook = workbook
          _this.card = sheetNames
          _this.cardActive = sheetNames[0]
          _this.getTable(sheetNames[0])
        }
      }
      xhr.send()
    },
    getTable (sheetName) {
      console.log(111111111111)
      console.log(sheetName)
      var worksheet = this.workbook.Sheets[sheetName]
      this.tableData = XLSX.utils.sheet_to_json(worksheet)
      console.log(this.tableData)
    }
  }
}
</script>



<style lang="less" scoped>
#table{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  border: 1px solid #ebebeb;
  padding: 20px;
  width: 80%;
  margin: 20px auto;
  border-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
  border-radius: 10px;
  overflow: scroll;
  height: 100%;
  .tab{
     margin: 0 0 20px 0;
    display: flex;
    flex-direction: row;
  }
}
</style>

<style scoped>
.is-active{
  background-color:#409EFF
}
span{
  background-color:red
}

</style>


-->


<!--<template>
   <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank"> Forum </a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank"> Community Chat </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>
      </li>
      <br />
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank"> vue-router </a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank"> vuex </a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank"> vue-loader </a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">
          awesome-vue
        </a>
      </li>
    </ul>
  </div> 
</template>
<script>
// import XEUtils from 'xe-utils'
// export default {
//   name: "HelloWorld",
//   data() {
//     return {
//       msg: "Welcome to Your Vue.js App",
//     };
//   },
//   created() {
//     console.log(XEUtils.toNumber("435432"))
    
//   },
// };
</script>
<style scoped>
/* h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
} */
</style>-->

